<script type="text/javascript" language="javascript">
function setMessageVisibility(){
	if(document.getElementById('task_submitted').style.display=="none"){
		document.getElementById('task_submitted').style.display="";
		window.setTimeout("Effect.toggle('task_submitted');", 5000);
	}
}
function pickDefault(el, action, langname) {
	el.checked = true;
	return ajaxRequestDefault(action, langname);
}
function ajaxRequestDefault(action, langname){
	new Ajax.Request('/go/babel/ajax/set_default/'+action+'/', {
		method: 'get',
		onSuccess: Element.update('task_submitted','Set active language to '+langname),
	});
	setMessageVisibility();	 
}
function addLanguage(id, langName){
	if(id < 1){
		return alert("Please select a language to add");
	}
	new Ajax.Request('/go/babel/ajax/add/'+id+'/',{
		method: 'get',
		onSuccess: Element.update('task_submitted','Added '+langName),
	});
	setMessageVisibility();   
}
function ajaxRequestRemove(langId, langName){
	new Ajax.Request('/go/babel/ajax/remove/'+langId+'/', {
		method: 'get',
		onSuccess: Element.update('task_submitted','Removed ' + langName),
		});
	setMessageVisibility();
}
</script>
<script language="javascript">
	function getSkill(langId, fieldId) {
		var updateSkill = function(req, json) {
			if (json.ok === true) {
				Element.update("langSkill_" + json.lang_id, json.lang_skill + "/100");
			}
		}

		new Ajax.Request('/go/babel/ajax/getskill/'+langId+'/', {
			method: 'get',
			onComplete: updateSkill,
		});
	}

	/**
	* Adds language to the language table and removes it from the language
	* option box
	* 
	* @param option_idx The currently selected index
	* @return void
	*/
	function addLang(option_idx) {
		if(option_idx < 1){
			return alert("Please select a language to add");
		}

		var td;
		var profileTable = document.getElementById("known_languages");
		// Create a new table row
		var tr = document.createElement("tr");

		// Find the language option box container
		var langList = document.getElementById("lang_list");
		// Get the currently selected option
		var currOption = langList.options[option_idx];
		
		addLanguage(currOption.value, currOption.innerHTML);
		
		// Create new table data and create the remove link
		td = document.createElement("td");
		var link = document.createElement("a");
		link.setAttribute("href", "javascript:removeLang('"+currOption.innerHTML+"', '"+currOption.value+"');");

		var img = document.createElement("img");
		setAttributes(img, {
			src: "/themes/icestorm/images/error.gif",
			title: "Delete?",
			width: "16px",
			height: "16px",
		});
		link.appendChild(img);

		td.appendChild(link);
		tr.appendChild(td);

		// Insert the language name as the second td
		td = document.createElement("td");
		td.innerHTML = currOption.innerHTML;
		tr.appendChild(td);

		// Fetch the skill and append it
		td = document.createElement("td");
		td.innerHTML = getSkill(currOption.value) + "/100";
		td.id = "langSkill_" + currOption.value;
		tr.appendChild(td);

		// Create the "set active" radio button
		td = document.createElement("td");
		var radio = document.createElement("input");
		setAttributes(radio, {
			type:"radio",
			name:"active_language",
			value:currOption.value,
			onclick: "javascript:pickDefault(this, "+currOption.value+", '"+currOption.innerHTML+"');",
		});
		td.appendChild(radio);

		tr.appendChild(td);
		// Set the language ID as the second td
		/*
		td = document.createElement("td");
		td.innerHTML = currOption.value;
		tr.appendChild(td);
		*/

		// Append the newly created row to the table
		tr.id = currOption.innerHTML;
		profileTable.appendChild(tr);

		// Remove the selected option from language list
		currOption.parentNode.removeChild(currOption);
	}
	function setAttributes(elm, attrs) {
		for (var attr in attrs) {
			elm.setAttribute(attr, attrs[attr]);
		}
	}

	/**
	* Removes a language from the language table and adds it to the language
	* option list
	* 
	* @param rowId Language name
	* @param langId Language ID
	* @return void
	*/
	function removeLang(rowId, langId) {
		var elm = document.getElementById(rowId);
		var opt = new Option(rowId, langId);
		var selectOptions = document.getElementById("lang_list");
		selectOptions.options[selectOptions.options.length] = opt;
		elm.parentNode.removeChild(elm);
		ajaxRequestRemove(langId, rowId);
	}
	function nukeOptionBox() {
		var knownLanguages = document.getElementById("known_languages");
		var tmp = knownLanguages.getElementsByTagName("tr");
		var langList = document.getElementById("lang_list");
		var tr;

		for(var i=1; i<tmp.length; i++) {
			tr = tmp.item(i);
			for (var x=0; x<langList.options.length; x++) {
				if (langList.options[x].innerHTML == tr.getElementsByTagName("td").item(1).innerHTML) {
					langList.options[x].parentNode.removeChild(langList.options[x]);
				}
			}
		}
	}


</script>

<div id="profile_update" style="height: 50px">
	<div id="task_submitted" class="success" style="display:none"></div>
</div>
<table class = "profile" width = "100%">
	<tr>
		<td width = "50%">
			<table class = "user_info">
				<tr>
					<td colspan = "3">
						<h3>{VAR_USER_FULL_NAME}</h3>
					</td>
				</tr>
				<tr>
					<td rowspan = "5">
					 <IMG src="/themes/icestorm/images/viking.jpg"
     							alt="A man." width = "100px" height = "130px">
					</td>
					<td>
					</td>
					<td>
					</td>
					
				</tr>
				<tr>
					<td>
						<li>Rank: </li>
					</td>
					<td>
						{VAR_USER_RANK}
					</td>
				</tr>
				<tr>
					<td align = "left">
						<li>Xp: </li>
					</td>
					<td align= "left">
						{VAR_USER_XP}
					</td>
				</tr>
				<tr>
					<td>
						<li>Country: </li>
					</td>
					<td align = "left">
						{VAR_USER_COUNTRY}
					</td>
				</tr>
				<tr>
					<td>
						<li>Age: </li>
					</td>
					<td align = "left">
						{VAR_USER_AGE}
					</td>
				</tr>
				
				<tr>
					<td colspan="3">
						{VAR_CRAP}
					</td>				
				</tr>
			</table>
		</td>
		<td width="50%">
			<h3>Known Languages</h3><br>
			<form name="registered_languages" method="post" action="">	
				<table id="known_languages">
					<tr>
						<th width=20px>&nbsp;</th>
						<th width="200px">Languages</th>
						<th width="100px">Skill</th>
						<th width="90px">Active</th>
					</tr> 

					<!-- BEGIN languages -->
					<tr id="{VAR_LANGUAGE_NAME}">
						<td><a href="javascript:removeLang('{VAR_LANGUAGE_JSON}','{LANG_ID}')"><img src="/themes/icestorm/images/error.gif" title="Delete?" width="16px" heigth="16px"/></a></td>
						<td>{VAR_LANGUAGE_NAME}</td>
						<td>{VAR_USER_SKILL}/100</td>
						<td><input type="radio" name="active_language" value="{LANG_ID}" {VAR_DEFAULT_CHECKED} onclick="javascript:pickDefault(this, {LANG_ID}, '{VAR_LANGUAGE_NAME}')"/></td>
					</tr>
					<!-- END languages -->
				</table>

				<h3>Add new language:</h3>
				<select name="lang_list" id="lang_list">
					<option id="default_add" value="-1">Please select language</option>
					<!-- BEGIN language_list -->
					<option value="{LANG_ID}">{VAR_LANGUAGE_JSON}</option>
					<!-- END language_list -->
				</select>
				<button type="button" class="btn-save" id="add_lang" value="Add" onclick="javascript:addLang($('lang_list').selectedIndex)">Add</button>
				<script language="javascript">
					nukeOptionBox();
				</script>
			</form>
		</td>
	</tr>
</table>

